<template>
	<div id="app">

		<el-container class="container1">
			<!-- el-header   hei -->
		  <el-header class="header">
			  
			  Header     --{{$store.state.count}}--   <div style="float: right;">用户名: {{$store.state.username}}</div>
			  
				<el-select v-model="value">
					
				 <el-option
				      v-for="item in options"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
					
					
				</el-select>
			  
			  
			  </el-header>
		  
		  
		  <el-container class="bottom">
		    <el-aside width="300px" class="aside" >
				
				<NavMenu></NavMenu>
				
			</el-aside>
		    <el-main class="main">
				
				
				<router-view></router-view>
				
			</el-main>
		  </el-container>
		</el-container>
	</div>
</template>

<script>
	import NavMenu from  '@/components/NavMenu.vue';
	export default {
		name: 'Home',
		data() {
			return {
				options: [{
			          value: '选项1',
			          label: '黄金糕'
			        }, {
			          value: '选项2',
			          label: '双皮奶'
			        }, {
			          value: '选项3',
			          label: '蚵仔煎'
			        }, {
			          value: '选项4',
			          label: '龙须面'
			        }, {
			          value: '选项5',
			          label: '北京烤鸭'
			        }],
			        value: ''
			}
		},
		methods: {
			
		},
		components:{
			NavMenu
		},
		created() {
			//$store --state  --值count
			console.log(this.$store.state.count);
		}

	}
</script>

<style scoped>
	.header{
		line-height:60px;
		background-color: cornflowerblue;
	}
	.bottom{
		
		height: calc(100vh - 60px);
	}
	.aside{
		
		background-color: #686868;
		
	}
</style>